<template>
	<div class="product-list">
		<!--搜索表单-->
		<div class="common-seach-wrap">
			

			<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="分销商名称">
					<el-input size="small" clearable v-model="searchForm.keys"  placeholder="请输入分销商名称"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button size="small" type="primary" icon="Search" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>

		

		<div class="product-content">
			<div class="table-wrap">
				<el-table ref="table" size="small" :data="tableData" border style="width: 100%" v-loading="loading"
					>
					<el-table-column type="index"  width="50" label="序号" align="center"  />
					<el-table-column prop="img" label="头像" align="center">
						<template #default="scope">
							<img v-if="scope.row.superUserRec.logo.file_path" :src="scope.row.superUserRec.logo.file_path" style="width: 80px; height: 80px; margin:auto">
							<span v-else>无</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称" align="center">
						<template #default="scope">
							<span>{{ scope.row.superUserRec.name }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="agency_remark" label="备注" align="center">
						<template #default="scope">
							<span>{{ scope.row.agency_remark || '无'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" align="center">
					</el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="270">
						<template #default="scope" >
							<div>
								<el-button @click="delClick(scope.row)" link type="danger" size="small"
									>删除</el-button>
								<el-button @click="editRemark(scope.row)" link type="primary" size="small"
								>编辑备注</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-dialog v-model="isShow" size="60%"  title="编辑备注" >
			<el-form size="small" ref="form" :model="form" label-width="60px">
				<el-form-item
					label="备注"
					:rules="[{ required: true, message: '请输入备注' }]"
					prop="remark"
				>
					<el-input v-model="form.remark" placeholder="请输入备注" class="max-w460"></el-input>
				</el-form-item>
			
			</el-form>
			<template #footer>
				<div style="flex: auto">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="saveRemark">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<!--分页-->
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
				:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
				:total="totalDataNumber"></el-pagination>
		</div>
	</div>
</template>

<script>
import {
	change_agency_remark,
	getdistr,
	dellink
} from "@/api/tuan.js";

export default {
	components: {},
	data() {
		return {
			/*是否正在加载*/
			loading: true,
			/*一页多少条*/
			pageSize: 10,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
			/*搜索参数*/
			searchForm: {
				keys: "", //名称
			},
			/*列表数据*/
			tableData: [],

			// 编辑备注
			isShow: false,
			row: null,
			form:{
				remark: '',
			}
		};
	},
	created() {
		/*获取列表*/
		this.getList();
	},
	methods: {
		closeDialog(){
			this.row = null
			this.isShow = false,
			this.form.remark = ''
		},

		saveRemark(){
			if(!this.form.remark){
				ElMessage.error('请输入备注');
				return
			}
			this.api_change_agency_remark()
		},

		editRemark(row){
			console.log(row)
			this.row = row
			this.isShow = true
			this.form.remark = row.agency_remark
		},

		async api_change_agency_remark(){
			let params = {
				link_id:this.row.id,
				remark:this.form.remark,
			}
			let data= await change_agency_remark(params)
			console.log(data)
			if(data.code == 1){
				this.closeDialog()
				this.getList()
			}
		},
		// 获取列表
		async getList() {
			let params = {
				keys:this.searchForm.keys,
				// page: this.curPage,
				// list_rows: this.pageSize
			}
			console.log(params)
			this.loading = true;
			let data = await getdistr(params);
			if (data.code == 1) {
				console.log(data.data.list)
				this.loading = false;
				this.tableData = data.data
				this.totalDataNumber = data.data.list.length
			} else {
				ElMessage.error(data.msg);
			}
		},

		/*选择第几页*/
		handleCurrentChange(val) {
			this.loading = true;
			this.curPage = val;
			this.getList();
		},

		/*每页多少条*/
		handleSizeChange(val) {
			this.pageSize = val;
			this.getList();
		},

	
		/*搜索查询*/
		onSubmit() {
			this.curPage = 1;
			this.getList();
		},

		/*删除*/
		delClick: function (row) {
			let self = this;
			let msg = "删除后不可恢复，确认删除吗?";;
			ElMessageBox.confirm(msg, "提示", {
				type: "warning",
			}).then(() => {
				dellink({
					id: row.id,
				}).then((data) => {
					ElMessage({
						message: "删除成功",
						type: "success",
					});
					self.getList();
				});
			});
		},

		
	},
};
</script>

<style>
.head-part {
	display: flex;
	align-items: center;
}

.el-form-item--small .el-form-item__content {
    line-height: 1 !important;
}
</style>
